<template>
<div>
  <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>方案管理</el-breadcrumb-item>
    </el-breadcrumb>
      <!-- 指标体系库中的相关属性 -->
      <div class="header">
        <span>方案名称</span><input v-model="this.schemeName" type="text" style="marginRight:58px;height:40px;marginLeft:12px">
          <span>体指标体系</span><input v-model="this.indexSystemId" type="text" style="marginRight:58px;height:40px;marginLeft:12px">
          <span>方案类别</span><input v-model="this.schemeCategory" type="text" style="marginRight:58px;height:40px;marginLeft:12px">
          <span>制定人</span><input v-model="this.constitutePeople" type="text" style="marginRight:58px;height:40px;marginLeft:12px">
          <span>制定时间</span><input v-model="this.establishedTime" type="text" style="marginRight:58px;height:40px;marginLeft:12px">
      </div>
      <!-- 指标体系树实现 -->
      <div class="container_bxs">
        <el-tree
          v-if="openOrNot"
          :data="treeData"
          node-key="current_id"
          :default-expand-all="defaultExpand"
          :expand-on-click-node="false"
          @node-click="handleLeftclick"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          @node-contextmenu="rightClick"
          :filter-node-method="filterNode"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          ref="tree"
        >
          <span class="slot-t-node span-ellipsis" slot-scope="{ node, data }">
            <span class="span-ellipsis-inner" v-show="!data.isEdit">
              <span class="span-ellipsis">
                <span
                  class="span-ellipsis"
                  :class="[(selectTreeData&&data.id==selectTreeData.id)? 'slot-t-node--label' : '']"
                  style="vertical-align:middle;"
                >
                  <i class="iconfont jxintegral-fill"></i>
                  {{node.label}}
                </span>
              </span>
            </span>
            <span v-show="data.isEdit">
              <el-input
                class="slot-t-input"
                style="height:28px;"
                size="mini"
                v-model="data.label"
                :ref="'slotTreeInput'+data.id"
                @blur.stop="NodeBlur(node,data)"
                @keydown.native.enter="NodeBlur(node,data)"
              ></el-input>
            </span>
          </span>
        </el-tree>
  </div>
  <div class="hBar"></div>
  <div class="hBar0"></div>
  <!-- 中间content -->
  <!-- 上边的内容 -->
    <div class="top0">
      权重计算过程
      <div class="selectAlg">
        <h5>权重算法选择</h5>
        <el-select v-model="value" clearable placeholder="请选择算法">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      </div>
      <el-button type="primary" style="width:100px;position:absolute;top:80%;left:80%">执行</el-button>
    </div>
    <div class="wBar"></div>
    <div class="wBar0"></div>
  <!-- 下边的内容 -->
  <div class="bottom0">
    结果展示
    <div class="boBtns">
    <el-button type="primary" style="width:150px;marginBottom:50px">完整性检验</el-button>
    <el-button type="primary" style="width:150px;">模型验证算法</el-button>
    </div>
    </div>
  <!-- 右侧content -->
  <div class="plansSerch">
    <!-- 右侧方案列表 -->
    <div style="height:300px;width:390px;overflow-y:auto">
          <el-card class="box-card">
            <el-table :data="findALLPlansData" stripe style="width: 150%">
              <el-table-column prop="id" label="Id" width="50"></el-table-column>
        <el-table-column prop="schemeName" label="名称" width="100"></el-table-column>
        <el-table-column  label="操作" width="150">
          <template v-slot="scope">
        <el-button @click="findPlanById(scope.row.id)" type="text" size="small">查看</el-button>
        <el-button  @click="deleteTixiById(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
    </el-table-column>
             </el-table>
          </el-card>
      </div>
  </div>
  <div class="plansShow">
    <span>方案说明：</span>
  </div>
  <div class="hBarr"></div>
  <div class="hBarr0"></div>
  <div class="btns">
    <el-button type="primary">导入</el-button>
    <el-button type="primary">导出</el-button>
    <el-button type="primary">新建</el-button>
    <el-button type="primary">修改</el-button>
    <el-button type="primary">删除</el-button>
    <el-button type="primary">保存</el-button>
  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'PersonManageLf',
  components: {},
  data() {
    return {
      openOrNot: true, // 展开收缩dom挂载切换
      defaultExpand: true, // 默认全部展开
      eleId: '',
      isShow: false,
      currentData: '',
      currentNode: '',
      menuVisible: false,
      firstLevel: false,
      filterText: '',
      maxexpandId: 4,
      findALLPlansData: [], // 存储全部方案数据的数组
      plansDataById: [], // 存储根据ID所查找到的方案
      // 输入框对应数据
      schemeName: '',
      schemeDescription: '',
      schemeCategory: '',
      establishedTime: '',
      indexSystemId: '',
      // 指标树使用到的存储变量
      treeData:
        [
          {
            id: 13,
            current_id: 1,
            parent_id: 0,
            index_id: 507,
            index_system_id: 1,
            weight: 0,
            weight_method_id: null,
            children: [
            ]
          }
        ],
      defaultProps: {
        children: 'children',
        label: 'index_id'
      },
      // 暂时存储一维数组
      indexSystemMidEntityList: []
    }
  },
  created() {
    this.getPlanList()
  },
  methods: {

    // 获取方案列表
    async getPlanList() {
      const { data: res } = await this.$http.get('/evaluation/findall')
      console.log(res)
      if (res.code !== 400) {
        this.findALLPlansData = res
        this.$message.success('获取方案列表成功!')
      } else { this.$message.error('获取方案列表失败!') }
    },
    // 根据ID查看方案
    async findPlanById(id) {
      const { data: res } = await this.$http.get('/evaluation/findById?id=' + id)
      this.$message.success('查看方案成功!')
      this.indexSystemMidEntityList = res[0].indexSystemMidEntityList
      this.schemeName = res[0].schemeName
      this.schemeCategory = res[0].schemeCategory
      this.schemeDescription = res[0].schemeDescription
      this.indexSystemId = res[0].indexSystemId + ''
      this.establishedTime = res[0].establishedTime + ''
      this.treeData = this.ArrayTotreeData(this.indexSystemMidEntityList)
      console.log(this.treeData)
    },
    // 一维数组转化为嵌套数组
    // 数组转树形结构数据（原理即为通过设置id为key值，再通过pid去找这个key是否一样，一样则为这数据的子级数据）
    ArrayTotreeData(treeArray) {
      var r = []
      var tmpMap = {}
      for (var i = 0, l = treeArray.length; i < l; i++) {
        // 以每条数据的id作为obj的key值，数据作为value值存入到一个临时对象里面
        tmpMap[treeArray[i].current_id] = treeArray[i]
      }
      for (i = 0, l = treeArray.length; i < l; i++) {
        var key = tmpMap[treeArray[i].parent_id]
        // 循环每一条数据的pid，假如这个临时对象有这个key值，就代表这个key对应的数据有children，需要Push进去
        // 如果这一项数据属于哪个数据的子级
        if (key) {
          // 如果这个数据没有children
          if (!key.children) {
            key.children = []
            key.children.push(treeArray[i])
            // 如果这个数据有children
          } else {
            key.children.push(treeArray[i])
          }
        } else {
          // 如果没有这个Key值，就代表找不到属于哪个数据，那就代表没有父级,直接放在最外层
          r.push(treeArray[i])
        }
      }
      return r
    }
  }
}
</script>
<style lang="less" scoped>
.header{
    position: absolute;
    height: 200px;
    width: 80%;
    top:12.5%;
    left: 13%;
}
.container_bxs{
  width:20%;
  position:absolute;
  top:20%;
  left:15%;
  height: 75%;
  background-color: #fff;
}
.hBar{
 height: 595px;
 width: 1px;
 position: absolute;
 float: left;
 left: 35%;
 top: 20%;
 background-color: #000;
}
.hBar0{
 height: 595px;
 width: 1px;
 position: absolute;
 float: left;
 left: 35.2%;
 top: 20%;
 background-color: #000;
}
.plansSerch{
  float: right;
  position: absolute;
  right: 5%;
  top:20%
}
.plansShow{
  background-color: #fff;
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 18%;
  height: 27%;
}
.hBarr{
  height: 595px;
  width: 1px;
  position: absolute;
  float: left;
  right: 28%;
  top: 20%;
  background-color: #000;
}
.hBarr0{
  height: 595px;
  width: 1px;
  position: absolute;
  float: left;
  right: 28.3%;
  top: 20%;
  background-color: #000;
}
.top0{
  width: 35%;
  height: 37.5%;
  background-color: #fff;
  position:absolute;
  top:20%;
  left: 36%;
}
.bottom0{
  width: 35%;
  height: 37.5%;
  background-color: #fff;
  position:absolute;
  bottom:5%;
  left: 36%;
}
.wBar{
  width: 35%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 56%;
  left: 36%;
}
.wBar0{
  width: 35%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 56.3%;
  left: 36%;
}
.btns{
  position: absolute;
  bottom: 2%;
  left: 40%;
}
.boBtns{
  position: absolute;
  top:10%;
  left: 70%;
}
.selectAlg{
  position: absolute;
  right: 2%;
}
</style>
